<template>
	<view>
	<!-- 图片支付详细: -->
		<view class="topdetail">
			<view class="">
					<view class="topdetail-img">
						<image class="imgtop1" src="/static/img/sanbing (2).jpg" mode=""></image>
					</view>
					<view class="topdetail-corporation">
						潮悦`兴趣班
					</view>
					<view class="topdetail-money">
						{{getdata.total_amount}}
					</view>
					<view class="topdetail-success">
						<view class="">
							<image style="width: 40rpx;height: 40rpx;" src="/static/tabBar/true.png" mode=""></image>
						</view>
						<view class="">
							支付成功
						</view>
					</view>
			</view>
		</view>
	<!-- 收起详情 -->
		<view class="">
			<view class="theline">
				<view class="line-left">
					
				</view>
				<view class="line-right" v-if="isshowdetail" @click="swipisshow">
					展开详情
					<view class="">
						<image style="margin-left: 10rpx; width: 20rpx;height: 20rpx;" src="../../static/tabBar/up_1.png" mode=""></image>
					</view>
				</view>
				<view class="line-right" v-else @click="swipisshow">
					收起详情
					<view class="">
						<image style="margin-left: 10rpx; width: 20rpx;height: 20rpx;" src="../../static/tabBar/down_1.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 收起详情: -->
			<template>
				<view v-show="isshowdetail">
					<view class="packdetail" >
						<view class="packdetail_left">
							【商品名称】
						</view>
						<view class="packdetail_right">
							{{getdata.orderName}}
						</view>
					</view>
					<view class="packdetail">
						<view class="packdetail_left">
							【商户全称】
						</view>
						<view class="packdetail_right">
							{{getdata.orderDescription}}
						</view>
					</view>
					<view class="packdetail">
						<view class="packdetail_left">
							【支付方式】
						</view>
						<view class="packdetail_right">
							{{getdata.method}}
						</view>
					</view>
					<view class="packdetail">
						<view class="packdetail_left">
							【创建时间】
						</view>
						<view class="packdetail_right">
							{{getdata.timestamp}}
						</view>
					</view>
					<myline></myline>
				</view>
			</template>
			
			
		</view>
		<!-- 其他信息 -->
		<view class="otherform" v-show="swipsecondshow">
			<view class="packdetail">
				<view class="packdetail_left">
					【交易单号】
				</view>
				<view class="packdetail_right">
					{{getdata.app_id}}
				</view>
			</view>
			<view class="packdetail">
				<view class="packdetail_left">
					【商户单号】
				</view>
				<view class="packdetail_right">
					{{getdata.trade_no}}
				</view>
			</view>
		</view>
		<view class="theline">
			<view class="line-left">
				
			</view>
			<view class="line-right" v-if="swipsecondshow" @click="clicksecondshow">
				其他信息
				<view class="">
					<image style="margin-left: 10rpx; width: 20rpx;height: 20rpx;" src="../../static/tabBar/up_1.png" mode=""></image>
				</view>
			</view>
			<view class="line-right" v-else @click="clicksecondshow">
				其他信息
				<view class="">
					<image style="margin-left: 10rpx; width: 20rpx;height: 20rpx;" src="../../static/tabBar/down_1.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 保存 -->
		<view class="savemessage">
			<view class="but">
				<button @click="gobackurl">退出并返回</button>
			</view>
			<view class="qus">
				订单有疑问?申请退款
			</view>
		</view>
	</view>
</template>

<script>
	import myline from '@/components/common/Lines.vue'
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				isshowdetail:true,
				swipsecondshow:true,
				getdata:{},
			};
		},
		components:{
			myline
		},
		methods:{
			//点击详情:
			swipisshow(){
				this.isshowdetail = !this.isshowdetail;
			},
			//其他信息:
			clicksecondshow(){
				this.swipsecondshow = !this.swipsecondshow;
			},
			//获取详细订单数据
			getorderiddetail(e,a,b){
				$http.request({
					url: "/getorderiddetail",
					method:"POST",
					header:{
						token:true
					},
					data:{
						order_id:e
					}
				}).then((res) => {
						this.getdata = res;
						this.getdata.orderName =a;
						this.getdata.orderDescription =b;
					}).catch(() => {
					uni.showToast({
						title: "失败",
						icon: "error",
						mask: true,
						duration: 2000,
						
					})
					
				})
			},
			gobackurl(){
				uni.navigateTo({
					url:'/pages/my-order/my-order'
				})
			}
		},
		onLoad(e){
			console.log(e);
			let {orderName,orderDescription} = JSON.parse(e.item)
			this.getorderiddetail(e.orderid,orderName,orderDescription);
			
		}
	}
</script>

<style lang="scss">
	.theline{
		display: flex;
		position: relative;
		height: 40rpx;
		.line-left{
			width: 70%;
			border-bottom: 1rpx solid #e4e4e4;
			position: absolute;
			left: 0;
			top: 10rpx;
			
		}
		.line-right{
			width: 28%;
			position: absolute;
			right: 0;
			top: 0;
			font-size: 24rpx;
			display: flex;
			color: #a2a2a2;
		}
	}
.topdetail{
	height: 480rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.topdetail-img{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx;
		.imgtop1{
		width: 100rpx;
		height: 100rpx;
	}
	}
	.topdetail-corporation{
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		margin-bottom: 20rpx;
	}
	.topdetail-money{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 54rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
	}
	.topdetail-success{
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.packdetail{
	display: flex;
	padding: 10rpx 30rpx;
	.packdetail_left{
		width: 30%;
	}
	.packdetail_right{
		width: 70%;
		margin-left: 10rpx;
	}
	
}
.savemessage{
	position: relative;
	
	.but{
		
	}
	.qus{
		display: flex;
		justify-content: center;
	}
}
</style>
